<%--
  Created by IntelliJ IDEA.
  User: 11076
  Date: 2018/12/3
  Time: 14:38
  To change this template use File | Settings | File Templates.
--%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
                                        pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="../base/top.jsp" %>

    <style>
        /*#checkedLabel span{*/
            /*margin-left: 5px;*/
            /*margin-right: 5px;*/
        /*}*/
        .dt-bar span{
            background-color: rgb(98,155,88);
            color: white;
            padding: 1px 5px;
            margin: 2px;
            float: left;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12">

                        <table id="table_report" class="table table-striped table-bordered table-hover">
                            <input type="text" name="labelLibId" id="labellib-id" style="display: none"/>
                            <input type="text" name="success" id="success" style="display: none"/>
                            <input type="text" name="msg" id="msg" style="display: none"/>
                            <tr>
                                <td style="text-align: right;width: 100px">标签库名称:</td>
                                <td><input type="text" id="labellib-name" value="" maxlength="30" placeholder="这里输入名称" title="名称" style="width:98%;"/></td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">待选标签:</td>
                                <td>
                                    <div id="chooseLabel">
                                        <ul class="list-inline">
                                            <c:forEach items="${labelList}" var="label">
                                                <li><label class="checkbox"><input class="ace" id="${label.labelId}" type="checkbox" value="cheese"><span class="lbl"></span> ${label.labelName}</label></li>
                                            </c:forEach>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">已选标签:</td>
                                <td id="checkedLabel" class="dt-bar">
                                    <%--<span class="label label-default">格式错误</span>--%>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">备注:</td>
                                <td  style="padding-top: 13px;">
                                    <font color="red">被使用的标签不可勾选</font>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: center;" colspan="10">
                                    <button id="save-btn" class="btn btn-mini btn-primary" onclick="save()">保存</button>
                                    <button class="btn btn-mini btn-danger" onclick="top.Dialog.close()">取消</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
</div>
<!-- basic scripts -->

<!-- 页面底部js¨ -->
<%@ include file="../base/foot.jsp" %>


<script>
    $(document).ready(function(){
        var usingLabelIds="";
        var odlLabelLibDetail="";
        if('${dotype}'=='edit'){
            <c:if test="${not empty usingLabelIds}">
                usingLabelIds =${usingLabelIds};
            </c:if>
            <c:if test="${not empty labelLibDetail}">
                odlLabelLibDetail =${labelLibDetail};
            </c:if>
            //设定原来的标签库id
            $("#labellib-id").val(odlLabelLibDetail.labelLibId);
            //设定原来的标签名
            $("#labellib-name").val(odlLabelLibDetail.labelLibName);
            //设定原来的标签
            for(var i=0;i<odlLabelLibDetail["labelList"].length;i++){
                //alert(odlLabelLibDetail["labelList"][i].labelId);
                $("#"+odlLabelLibDetail["labelList"][i].labelId).prop("checked",true);
            }
            for(var i=0;i<usingLabelIds.length;i++){
                $("#"+usingLabelIds[i]).prop("disabled",true);
                $("#"+usingLabelIds[i]).prop("checked",true);
            }
            //显示选中的标签
            showCheckedLabel();
        }
    })
    $("input[type=checkbox]").click( function(){
        showCheckedLabel();
    });

    function showCheckedLabel() {
        $("#checkedLabel").html("");
        $("input[type='checkbox']").each(function(){
            if($(this).is(":checked")){
                $("#checkedLabel").append('<span>'+$(this).parent().text()+'</span>');
            }
        })
    }
    //保存标签库信息
    function save() {
        if(!checkFormats()){
            return;
        }
        var labelLib ={};
        labelLib.labelLibId =$("#labellib-id").val();
        labelLib.labelLibName = $("#labellib-name").val();
        var labelList = [];
        for (var i = 0; i < $("#chooseLabel input:checkbox:checked").length; i++) {
            var label = {};
            label.labelId = $("#chooseLabel input:checkbox:checked").eq(i).attr("id");
            labelList.push(label);
        }
        labelLib.labelList = labelList;
        $.ajax({
            url:"label_lib/${dotype}",
            type:"POST",
            dataType: "json",
            data:JSON.stringify(labelLib),
            contentType:"application/json",
            success:function (data) {
                $("#success").val(data["success"]);
                $("#msg").val(data["msg"]);
                //关闭一定要写在ajax执行完成之后
                top.Dialog.close();
            }
        })
    }

    function setCheckAndUsingLabel() {

        $("input[type='checkbox']").each(function () {
            $(this).attr("id");
        });

    }

    /**
     * 检查表单格式
     *
     * @create on 2018/11/27 by johnny
     * @update on 2018/12/27 by johnny
     */
    function checkFormats() {
        if($("#labellib-name").val()==null || $("#labellib-name").val()==""){
            top.operateError("标签库名不能为空");
            $("#labellib-name").focus();
            return false;
        }
        var reg =/^[\u4e00-\u9fa5]{1,8}$/g;
        if(reg.test($("#labellib-name").val())){
            return true;
        }else{
            top.operateError("标签库名必须为1-8个中文");
            $("#labellib-name").focus();
            return false;
        }
        return false;
    }

</script>
</body>
</html>
